<template>
  <div>
      <el-table :data="InfoList" style="width: 100%">
        <el-table-column prop="companyId" label="公司名称" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subject" label="邮件标题" width="200px"></el-table-column>
        <el-table-column prop="email" label="邮件信息" ></el-table-column>
      </el-table>
    </div>
  </template>

  <script>
  import axios from 'axios';

  export default {
    name: 'EmailComponent',
    data() {
        return {
            InfoList: [],
        };
    },
    methods: {
        fetchInfo() {
          axios.get(`http://localhost:8080/emails/byUserId?userId=${this.$store.state.id}`)
        .then(response => {
                    this.InfoList = response.data.data;
                    const fetchCompanyNames = this.InfoList.map(info => {
                      return axios.get(`http://localhost:8080/company/findCompany/${info.companyId}`)
                      .then(Response => {
                          const newInfo = {...info, companyName: Response.data.name};
                          return newInfo;
                        })
                      .catch(error => {
                          console.error("获取公司名称失败:", error);
                        });
                    });
                    Promise.all(fetchCompanyNames)
                    .then(updatedInfos => {
                        this.InfoList = updatedInfos;
                      });
                })
        .catch(error => {
                    console.error('Error fetching info:', error);
                });
        },
    },
    mounted(){
      this.fetchInfo();
    }
  };
  </script>

  <style scoped>
.mycontainer {
    margin: 0 400px;
  }
.resume-container{
    background-color: #e6f7ff;
  }
.mytags{
    margin-top: 15px;
  }
.resume-section {
    display: flex;
    width: 100%;
    height: 100px;
  }
.picture-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.info-section {
    flex: 3;
    margin: 0 20px;
  }
.name-section {
    flex: 1;
    margin-top: 9px;
  }
.gender-age-section {
    flex: 1;
    display: flex;
    margin-top: 9px;
  }
.details-section {
    flex: 6;
    display: flex;
    flex-direction: column;
  }
  </style>
